import React, { Component } from "react"
//import PubSub from "pubsub-js"
// import { PropTypes } from "prop-types"
//import { connect } from "react-redux"

// import { submitList, clearAll, delItem } from "../redux/actions"
import { clearAll } from "../redux/actions"
import Comment from "../components/comment"
import CommentsList from "../components/commentList"

import "../index.css"
import store from "../redux/store"

export default class App extends Component {
    // static propTypes = {
    //     //attribute
    //     commentList: PropTypes.array.isRequired,
    //     // username: PropTypes.string.isRequired,
    //     // context: PropTypes.string.isRequired,
    //     //func
    //     // addUsername: PropTypes.func.isRequired,
    //     // addContext: PropTypes.func.isRequired,
    //     submitList: PropTypes.func.isRequired,
    //     clearAll: PropTypes.func.isRequired,
    //     delItem: PropTypes.func.isRequired,
    // }
    componentDidMount() {
        // PubSub.subscribe("addUsername", (msg, username) => { this.addUsername(username) });
        // PubSub.subscribe("addContext", (msg, context) => { this.addContext(context) });
        // PubSub.subscribe("delItem", (msg, index) => { this.delItem(index) });
        // const action = testAjax()
        // store.dispatch(action)
    }

    // addUsername = (val) => {
    //     this.setState({
    //         username: val
    //     })
    // }
    // addContext = (val) => {
    //     this.setState({
    //         context: val
    //     })
    // }
    // submitList = () => {
    //     const state = this.state
    //     //原数租
    //     let commentList = state.commentList
    //     //数据 
    //     let username = state.username
    //     let context = state.context

    //     if (!commentList) {
    //         commentList = [{ username: username, context: context }]
    //     } else {
    //         commentList.unshift({ username: username, context: context })
    //     }

    //     this.setState({ commentList })
    //     // for (const iterator of commentList) {
    //     //     console.log(iterator);
    //     // }
    // }
    clearAll = () => {
        // this.setState({
        //     commentList: []
        // })
        const action = clearAll()
        store.dispatch(action)
    }
    // delItem = (index) => {
    //     let { commentList } = this.state
    //     commentList.splice(index, 1)
    //     this.setState({ commentList })
    // }


    render() {
        console.log("--------app", this.props);
        // const { submitList, clearAll, commentList, delItem } = this.props
        return (
            <div>
                <h1>请发表您的评论</h1>
                <div className="main_wrap">
                    <div className="left_wrap">
                        {/* <Username></Username> */}
                        <Comment></Comment>
                        {/* <Comment></Comment> */}

                    </div>
                    <div className="right_wrap">
                        <div>评论回复:</div> <button onClick={this.clearAll}>清空</button>
                        {/* <CommentList commentList={this.state.commentList} delItem={this.delItem}></CommentList> */}
                        <CommentsList></CommentsList>
                    </div>
                </div>
            </div>
        )
    }
}

// export default connect(
//     state => ({ commentList: state.commentList, username: state.username, context: state.context }),
//     { submitList, clearAll, delItem }
// )(App)
